<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        border-radius: 10px;
        background: lightblue;
      }
      .active {
        background: red;
        color: gold;
      }
      .box span {
        font-size: 25px;
      }
      .city-box .header {
        display: flex;
      }
      .city-box .header .header-span {
        margin: 10px;
        padding: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: lightcoral;
        border-radius: 5px;
        color: #fff;
      }
      .city-box .header .active {
        background: red;
        color: gold;
      }
    </style>
  </head>
  <body>
    <!-- vue生效的代码区域 -->
    <div id="app">
      <h1>1. 循环指令</h1>
      <span v-for="(item, index) in arr">{{index}} ==> {{item}} ;</span>
      <h2>2. 动态绑定指令 v-bind可以绑定动态数据 v-bind => :</h2>
      <!-- <img style="width: 100px; height: 100px" v-bind:src="src" /> -->
      <img style="width: 100px; height: 100px" :src="src" />
      <h3>3. 显示隐藏指令 v-show</h3>
      <button v-on:click="handleShowClick">是否显示学委</button>
      <h1 v-show="show">学委：高庆丰</h1>
      <hr />
      <button @click="handleShow">是否显示班长</button>
      <hr />
      <h1>4. 条件判断指令 v-if / v-else-if / v-else</h1>
      <button v-on:click="showClick">是否显示学委</button>
      <h1 v-if="show">学委：高庆丰</h1>
      <h1 v-else>2002A-班长: 王鑫</h1>

      <h1>5. 双向数据绑定指令 （主要用户表单元素）</h1>
      {{value}}
      <input type="text" v-model="value" />
      check:{{check}} 多选框:
      <input type="checkbox" v-model="check" />
      <hr />
      checkTwo:{{checkTwo}}
      <!-- <input type="radio" name="age" v-model="check" />
      <input type="radio" name="age" v-model="checkTwo" /> -->
      <textarea v-model="value"></textarea>
      <h1>6. 渲染富文本的标签指令：v-html</h1>
      <hr />
      {{htmlText}}
      <div v-html="htmlText"></div>
      <h2>7. v-text渲染文本的指令</h2>
      <div v-text="title"></div>
      <div>{{title}}</div>
    </div>
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script src="./node_modules/mockjs/dist/mock.js"></script>
    <script>
      // 数据驱动dom (所有的效果，能用数据，都尽量不用直接操作dom)
      // v-show v-if都能做显示隐藏，但是v-show是借用了 display:none.
      // 如果是频繁切换的场景，建议使用v-show
      // v-if用在不太常切换的场景下

      const app = new Vue({
        el: '#app', // 挂载让vue生效的元素
        data: {
          title: 'Hello Vue!',
          arr: ['1', '2', '3'],
          src: 'https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF',
          show: true,
          isHeadBoy: true,
          value: '我是默认数据',
          check: true,
          checkTwo: true,
          // 富文本数据渲染
          htmlText: '<h1>标题:</h1> <div style="color:red">我是内容</div>',
        },
        created() {},
        methods: {
          handleShowClick() {
            this.show = !this.show
          },
          handleShow() {
            this.isHeadBoy = !this.isHeadBoy
          },
          showClick() {
            this.show = !this.show
          },
        },
      })
    </script>
  </body>
</html>
